// 我的收藏
<template>
  <div class="myQuotation" v-loading="loading">
    <ul class="title">
      <li v-for="(item,key) in title" :key="key" class="active" @click="changesjump($event,key)">
        {{item.name}}
        <i v-show="item.num">({{item.num}})</i>
      </li>
    </ul>

    <div>
      <div class="tablek" v-if="!empty">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="LegendSrc" label="图例" width="130">
            <template slot-scope="scope">
              <div class="Legend">
                <img :src="scope.row.goods_logo" alt="图片加载失败">
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="selling_price" label="￥价格" width="140">
            <template slot-scope="scope">
              <div class="redcolor">{{ scope.row.selling_price }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="goods_title" label="品牌/名称 " ></el-table-column>

          <el-table-column prop="goods_stock" label=" 库存 " width="100"></el-table-column>

          <el-table-column prop="[id,goods_id]" label="操作 " width="160">
            <template slot-scope="scope">
              <div class="operation">
                <el-button
                  type="info"
                  @click="cancelCollection(scope.$index, scope.row, scope.row.id)"
                  size="mini"
                >取消收藏</el-button>
                <!-- <el-input-number
                  v-model="scope.row.ClosingDate"
                  @change="handleChange"
                  :min="1"
                  size="mini"
                ></el-input-number>-->
                <!-- <el-button
                  type="warning"
                  @click="toShoppingCart(scope.$index, scope.row)"
                  size="mini"
                >加入购物车</el-button>-->
                <el-button
                  type="warning"
                  @click="jumpdetails( scope.row.id, scope.row.goods_id, scope.row)"
                  size="mini"
                >查看详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <no-data :msg="msg" v-if="empty" />
      <!-- <div class="empty" v-if="empty">您尚未收藏任何产品，快去挑选收藏吧~</div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "myCollection",
  data() {
    return {
      loading: false,
      empty: false, // 数据为空
      tableData: [],
      msg: '暂无相关数据...',
      title: [
        {
          name: "我的收藏",
          id: 0
        }
      ],
    }
  },

  methods: {
    // 获取收藏夹的商品
    async getInfo() {
      this.loading = true
      let user_id = this.$store.state.UserInfor.user_id
      let page = 1
      let res = await this.$http({
        method: 'post',
        url: '/api/index/web/myCollection',
        data: {
          user_id,
          page
        }
      })
      if (res.data.State.Code == 200) {
        this.tableData = res.data.data
        console.log(res.data.data)
        this.loading = false
      }
      if (res.data.State.Code == 2005) {
        this.loading = false
        this.empty = true
      }

    },
    // 取消收藏的消息提示
    open1() {
      this.$message({
        message: "取消收藏成功！！！",
        type: "success"
      })
    },
    // 查看详情
    jumpdetails(id, pid,item) {
      console.log(id, pid)
      this.$router.push({
        name: 'productDetails',
        params: {
          id,
          pid,
          item
        }
      })
    },
    // // 加入购物车的消息提示
    // open2() {
    //   this.$message({
    //     message: "成功加入购物车！！！",
    //     type: "success"
    //   });
    // },

    // // 加入购物车
    // toShoppingCart(index, row) {
    //   this.open2();
    // },

    handleChange(value) {
      console.log(value)
    },

    // 取消收藏
    async cancelCollection(index, row, product_id) {
      let user_id = this.$store.state.UserInfor.user_id
      console.log(user_id, product_id)
      let res = await this.$http({
        method: 'post',
        url: '/api/index/web/delCollection',
        data: {
          user_id,
          product_id
        }
      })
      if (res.data.State.Code == 200) {
        this.tableData.splice(index, 1);
        this.open1();
        if (this.tableData.length < 1) {
          this.empty = true;
        }
      }
    },

    handleDelete(index, row) {
      console.log(index, row)
    },

    changesjump(ev, key) {
      this.index = key
      console.log(this.index)
    }
  },
  created() {
    this.getInfo()
  }
}
</script>
<style lang="scss" scoped>
.myQuotation {
  width: 970px;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
  .NumberOfBars {
    color: #ff9000;
    font-size: 12px;
    text-indent: 20px;
    line-height: 40px;
  }
  .tablek {
    padding: 15px 0px;
    font-size: 12px;
    .el-table {
      /deep/ .cell {
        text-align: center;
      }
      /deep/ .redcolor {
        font-weight: bold;
        color: #ff0000;
        font-size: 16px;
      }
      /deep/ .Legend {
        img {
          width: 100px;
          height: 100px;
          // padding: 10px 15px;
        }
      }
      /deep/ .operation {
        // .el-input-number {
        //   margin: 15px 0px;
        // }
        .el-button {
          margin: 10px;
        }
      }
    }
  }
  .empty {
    width: 100%;
    height: 400px;
    margin-top: 20px;
    font-size: 30px;
    line-height: 400px;
    text-align: center;
    color: #dbdbdb;
    border: 1px dashed #dbdbdb;
    letter-spacing: 2px;
  }
}
</style>


